<template>
  <div class="page">
    <div class="one">
      <b-menu :menu="menu" hover-color="var(--warning)" item-height="40px" item-width="70px"></b-menu>
    </div>
    <b-menu :menu="menu_1" theme="dark"></b-menu>
    <br />
    <b-menu :menu="menu2"/>
    <h4>vertical属性</h4>
    <div class="group">
      <div class="vertical">
        <b-menu :menu="menu" vertical :active-index.sync="activeIndex"></b-menu>
      </div>
      <div class="vertical">
        <b-menu :menu="menu2" vertical></b-menu>
      </div>
      <div class="vertical">
        <b-menu
          :menu="menu2"
          vertical
          theme="dark"
          text-color="#fff"
          item-width="200px"
          item-height="49px"
          active-color="red"
          hover-background-color="#f6f6f6"
          active-background-color="yellow"
        ></b-menu>
      </div>
      <div class="vertical">
        <b-menu :menu="menu2" vertical :active-show-border="false" class="last-menu"></b-menu>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MenuPage",
  data() {
    return {
      activeIndex:3,
      menu: ["处理中心", "我的工作台", "消息中心", "消息中心"],
      menu_1: ["处理中心", "我的工作台", "消息中心", "消息中心"],
      menu2: [
        { link: "", icon: "iconfont icon-swticonzuqiu", content: "处理中心" },
        { link: "", icon: "iconfont icon-swticonzuqiu", content: "我的工作台" },
        { link: "", icon: "iconfont icon-swticonzuqiu", content: "消息中心" },
        { link: "", icon: "iconfont icon-swticonzuqiu", content: "消息中心" },
      ],
      menu3: [
        {
          value:0,
          link: "",
          icon: "iconfont icon-touxiang",
          content: "处理中心",
          childrens: [
            { link: "", icon: "iconfont icon-touxiang", content: "处理中心" },
            { link: "", icon: "iconfont icon-touxiang", content: "我的工作台" },
            {
              link: "",
              icon: "iconfont icon-swticonzuqiu",
              content: "消息中心",
            },
          ],
        },
        {
          link: "",
          icon: "iconfont icon-touxiang",
          content: "我的工作台",
          childrens: [
            { link: "", icon: "iconfont icon-touxiang", content: "处理中心" },
            { link: "", icon: "iconfont icon-touxiang", content: "我的工作台" },
            {
              link: "",
              icon: "iconfont icon-swticonzuqiu",
              content: "消息中心",
            },
          ],
        },
        {
          link: "",
          icon: "iconfont icon-touxiang",
          content: "消息中心",
          childrens: [
            { link: "", icon: "iconfont icon-touxiang", content: "处理中心" },
            { link: "", icon: "iconfont icon-touxiang", content: "我的工作台" },
            {
              link: "",
              icon: "iconfont icon-swticonzuqiu",
              content: "消息中心",
            },
          ],
        },
        {
          link: "",
          icon: "iconfont icon-touxiang",
          content: "其他事务",
          childrens: [
            { link: "", icon: "iconfont icon-touxiang", content: "处理中心" },
            { link: "", icon: "iconfont icon-touxiang", content: "我的工作台" },
            {
              link: "",
              icon: "iconfont icon-swticonzuqiu",
              content: "消息中心",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style scoped>
.group {
  display: flex;
}
.item {
  padding: 15px 0px;
}
.vertical {
  margin-right: 20px;
}
.one{
  padding: 10px 0px;
  border: 1px solid red;
  margin: 10px 0px;
}
.last-menu{
  border: 1px solid purple;
}
</style>